<template>
  <PageContainer>
    <Header title="编辑联系方式" />
    <view class="hb-p-4 hb-flex hb-flex-col hb-gap-4">
      <Card title="手机号">
        <template #header-right>
          <view class="hb-flex hb-items-center hb-gap-2">
            <text class="hb-text-sm hb-text-[#999996]">对外展示</text>
            <tm-switch
              v-model="formData.isShowPhone"
              :selected="1"
              :unSelected="0"
              unCheckedColor="#999996"
              :follow-theme="false"
            />
          </view>
        </template>
        <view>
          <TmInput
            v-model="formData.phone"
            :height="88"
            :font-size="28"
            placeholder="请输入手机号"
            :maxlength="11"
            type="number"
          />
        </view>
      </Card>

      <Card title="微信号">
        <template #header-right>
          <view class="hb-flex hb-items-center hb-gap-2">
            <text class="hb-text-sm hb-text-[#999996]">对外展示</text>
            <tm-switch
              v-model="formData.isShowWechatId"
              :selected="1"
              :unSelected="0"
              unCheckedColor="#999996"
              :follow-theme="false"
            />
          </view>
        </template>
        <view>
          <TmInput
            v-model="formData.wechatId"
            :height="88"
            :font-size="28"
            placeholder="请输入微信号"
            :maxlength="20"
          />
        </view>
      </Card>

      <Card title="邮箱">
        <template #header-right>
          <view class="hb-flex hb-items-center hb-gap-2">
            <text class="hb-text-sm hb-text-[#999996]">对外展示</text>
            <tm-switch
              v-model="formData.isShowEmail"
              :selected="1"
              :unSelected="0"
              unCheckedColor="#999996"
              :follow-theme="false"
            />
          </view>
        </template>
        <view>
          <TmInput
            v-model="formData.email"
            :height="88"
            :font-size="28"
            placeholder="请输入邮箱"
            :maxlength="20"
          />
        </view>
      </Card>

      <BottomSubmit
        submitBtnLabel="保存"
        :submitBtnColor="'#2878FF'"
        @submit="handleSubmit"
        :submitLoading="loading"
      />
    </view>
  </PageContainer>
</template>

<script lang="ts" setup>
  /* contactInfoEdit 编辑联系方式 */
  import { FunctionArgs } from '@vueuse/core';
  import Card from '../components/Card/index.vue';
  import { BotInfo } from '@/api/card/type';
  import { botInfoAddOrUpdate, getInfo } from '@/api/card';
  import { useUserStore } from '@/store/modules/user';
  import { debounce } from 'lodash-es';
  const userStore = useUserStore();

  let success: FunctionArgs | undefined;
  customOnload<'CardContactInfo'>((options) => {
    success = options.success;
    queryInfo();
  });

  const queryInfo = async () => {
    const res = await getInfo();
    formData.phone = res?.phone;
    formData.email = res?.email;
    formData.wechatId = res?.wechatId;
    formData.isShowPhone = res?.isShowPhone;
    formData.isShowEmail = res?.isShowEmail;
    formData.isShowWechatId = res?.isShowWechatId;
  };
  const formData = reactive<BotInfo>({
    phone: '',
    email: '',
    wechatId: '',
    isShowPhone: 0,
    isShowEmail: 0,
    isShowWechatId: 0,
  });
  const loading = ref(false);
  const handleSubmit = debounce(async () => {
    try {
      loading.value = true;
      validatePhone();
      await botInfoAddOrUpdate(formData);
      userStore.getUserInfo();
      success?.();
      uni.showToast({
        title: '保存成功',
        icon: 'success',
      });
      setTimeout(() => {
        navigateBack();
      }, 1000);
    } catch (error) {
      console.error(error);
    } finally {
      loading.value = false;
    }
  }, 200);

  // 验证手机号
  const validatePhone = () => {
    const phoneReg = /^1[3-9]\d{9}$/;
    if (formData.phone && !phoneReg.test(formData.phone)) {
      uni.showToast({
        title: '请输入正确的手机号',
        icon: 'none',
      });
      throw new Error('请输入正确的手机号');
    }
  };
</script>

<style lang="scss" scoped></style>
